<template>
	<view class="content">
		<view class="content-header">
			<!--  -->
			<specialbanner :banner-list="bannerList" :swiper-config="swiperConfig" @toParent='toParent' ref="swiperTop"
				:type='curryIndex' :useridentity="userIdentity" :dataTime='dataTime'
				:listStatus='(curryIndex==0&&list)||(curryIndex==1&&list2)||((curryIndex==2&&userIdentity!=3)&&list3)||(userIdentity == 3 && list4)'
				:content='content' :resData='resData'>
			</specialbanner>
		</view>
		<view class="content-title">
			<!-- active 试用 active1 正式 active2金牌 -->
			<view :class="[curryIndex==0&&'active',curryIndex==1&&'active1',curryIndex==2&&'active2']">
			</view>
			<!-- activeText1 activeText2 activeText3 -->
			<view :class="[curryIndex==0&&'activeText1',curryIndex==1&&'activeText2',curryIndex==2&&'activeText3']">
				{{(curryIndex==0&&'试用')||(curryIndex==1&&'正式')||(curryIndex==2&&'金牌')}}零工权益
			</view>
			<view @click="toequity"> 权益对比 <image src="../../static/icon3/grow/left.png" mode="" class="img"></image>
			</view>
		</view>
		<!-- 当前享受权益 -->
		<view class="content-status">
			<scroll-view class="scroll-view" :scroll-x="true" @scrolltoupper='scrolltoupper'
				@scrolltolower='scrolltolower'>
				<block v-for="(t,i) in cardList" :key="i">
					<view class="card">
						<!-- 试用1 正式2  金牌3 -->
						<view
							:class="{'icon-card':true, 'icon-card1':curryIndex==0&&(i<4||i==6),  'icon-card2':curryIndex==1&&(i<5||i==6),'icon-card3':curryIndex==2}"
							style="margin-bottom: 20rpx;"
							:style="{backgroundImage:`url(../../static/icon3/grow/bg${(curryIndex==0&&i+1)||((curryIndex==1&&(11+i)))||((curryIndex==2&&(111+i)))}.png)`}">
						</view>
						<text
							:class="{ 'color1':curryIndex==0&&(i<4||i==6),'color2':curryIndex==1&&(i<5||i==6),'color3':curryIndex==2 } ">{{t}}</text>
					</view>
				</block>
			</scroll-view>
			<view class="change-btn">
				<view
					:class="['btn1',(curryIndex==0&&'btn11')||(curryIndex==1&&'btn12')||(curryIndex==2&&'btn13'),   (isRight==1&&curryIndex==0&&'btnStatus1')||  (isRight==1&&curryIndex==1&&'btnStatus2')||  (isRight==1&&curryIndex==2&&'btnStatus3')]">
				</view>
				<view
					:class="['btn1',(curryIndex==0&&'btn11')||(curryIndex==1&&'btn12')||(curryIndex==2&&'btn13'),  (isRight==2&&curryIndex==0&&'btnStatus1')||  (isRight==2&&curryIndex==1&&'btnStatus2')||  (isRight==2&&curryIndex==2&&'btnStatus3')]">
				</view>
			</view>
		</view>
		<view class="mosk-vip">
			<!-- 开通权益的遮罩层 正式开通-->
			<view class="mosk"
				v-if="(curryIndex==1 && (content.userIdentity==1 || content.userIdentity==4)) && (curryIndex==1)&&!((content.userIdentity == 5 || content.userIdentityStatus == 2) ||(content.userIdentity == 1 && content.studyFlag==1))">
				<text>激活正式零工，仅需2步</text>
				<view :class="styleScole">
					<view>
						<text class="fontWait">正式培训</text>
						<text>了解正式零工接单具体业务</text>
					</view>
					<view @click="toPeixun(1)"
						:class="((content.userIdentity == 5 || content.userIdentityStatus == 2)||((userIdentity==4)&&(content.userIdentityStatus==0)&& content.studyFlag==1)||(content.userIdentity == 1 && content.studyFlag==1))?'px':' py' ">
						{{((content.userIdentity == 5 || content.userIdentityStatus == 2)||((userIdentity==4)&&(content.userIdentityStatus==0)&& content.studyFlag==1) ||(content.userIdentity == 1 && content.studyFlag==1))?'已完成':'去培训'}}
					</view>
				</view>
				<view>
					<view>
						<text class="fontWait">购买工装</text>
						<text>用于提高正式零工服务质量</text>
					</view>
					<view @click="toBug" :class="content.frockFlag?'px':'py'"> {{content.frockFlag?'已完成':'去购买'}}
					</view>
				</view>
			</view>
			<!-- 金牌开通 -->
			<view class="mosk2"
				v-if='(curryIndex==2 && (resData.userIdentity==0 || content.userIdentity==2 || content.userIdentity==3 || content.userIdentity==5 || (resData.userIdentity==5&&content.studyFlag==3) || (resData.userIdentity==5 && [0,null].includes(resData.ensureAccount)))) && 
				(curryIndex==2&&!(( resData.userIdentity==0 || resData.userIdentity==3 || resData.userIdentity==2) || (resData.userIdentity==5&&content.studyFlag==3)) || (resData.userIdentity==5 && [0,null].includes(resData.ensureAccount)))  '>
				<text>开启金牌零工晋升，仅需2步</text>
				<text>开启后，直接享受金牌零工权益</text>
				<view>
					<view>
						<text class="fontWait">专属培训</text>
						<text>用于提高金牌零工服务质量</text>
					</view>
					<view @click="toPeixun(2)"
						:class=" resData.userIdentity==3 || (resData.userIdentity==2&&content.studyFlag==3 || (resData.userIdentity==5&&content.studyFlag ==3))?'px':' py' ">
						{{(resData.userIdentity==3 || (resData.userIdentity==2&&content.studyFlag ==3) || (resData.userIdentity==5&&content.studyFlag==3))?'已完成':'去培训'}}
					</view>
				</view>
				<view :class="styleScole">
					<view style="margin-top: 26rpx;">
						<text class="fontWait">保证金</text>
						<text style="line-height: 1.3!important;">用于保障金牌零工服务质量，晋升失败后，实时退回</text>
					</view>
					<view @click="toZhifu"
						:class="(resData.ensureAccount !== null && resData.ensureAccount > 0)?'px':' py' ">
						{{(resData.ensureAccount !== null && resData.ensureAccount > 0)?'已支付':'去支付'}}
					</view>
				</view>
			</view>
			<view class="content-title top"
				v-if="(curryIndex==0 && resData.userIdentityStatus==0) || (curryIndex==1 && resData.userIdentityStatus==1) ||(curryIndex==2 && resData.userIdentityStatus==2)||(curryIndex==2 &&userIdentity==5&&resData.userIdentityStatus==1 )">
				<!-- active 试用 active1 正式 active2金牌 -->
				<view :class="[curryIndex==0&&'active',curryIndex==1&&'active1',curryIndex==2&&'active2']">
				</view>
				<!-- activeText1 activeText2 activeText3 -->
				<view :class="[curryIndex==0&&'activeText1',curryIndex==1&&'activeText2',curryIndex==2&&'activeText3']">
					零工成长任务 </view>
			</view>
			<!-- 步骤条 -->
			<promotion :type='curryIndex' :curryIndex='curryIndex' :resData='resData' :content='content'
				:stupIndex='stupIndex' @refresh='refresh' :dataTime='dataTime'
				v-if="(curryIndex==0 && resData.userIdentityStatus==0) || (curryIndex==1 && resData.userIdentityStatus==1) ||(curryIndex==2 && resData.userIdentityStatus==2)||(curryIndex==2 &&userIdentity==5&&resData.userIdentityStatus==1 )"
				:bannerList='(curryIndex==0&&list)||(curryIndex==1&&list2)||((curryIndex==2&&userIdentity!=3)&&list3)||(userIdentity == 3 && list4)'>
			</promotion>
			<!-- 激活弹框  -->
			<!-- 规则 -->
			<oldJobRule v-if="curryIndex==0"></oldJobRule>
			<officialRule v-if="curryIndex==1"></officialRule>
			<goldRule v-if="curryIndex==2" :userIdentity='userIdentity' :bannerList='list4'></goldRule>
		</view>
		<mosk :title='title' v-show='moskShow' :title2='title2' @fromChild='fromChild' :classType='classType'>
		</mosk>
		<mosk2 v-show='moskShow2' :iconTitle='iconTitle' :iconTitle2='iconTitle2' @fromChild='fromChild'
			:imgNmuber='imgNmuber' :classType='classType' :time="goldMedalEndTime">
		</mosk2>
		<!-- 去学习 -->
		<studyVideo v-if='showGrow' @toClose='toClose' :isStydu='content.studyFlag' :video='video' :typeVide='typeVide'>
		</studyVideo>
	</view>
</template>
<script>
	// 顶部轮播
	import specialbanner from './components/specialBanner.vue'
	import promotion from './components/promotion.vue' //晋升
	import mosk from './components/mosk.vue'
	import mosk2 from './components/mosk2.vue'
	import goldRule from './components/goldRule.vue' //金牌规则
	import officialRule from './components/officialRule.vue' //正式规则
	import oldJobRule from './components/oldJobRule.vue' //试用规则
	import studyVideo from '../../components/helpMosk/mosk.vue'
	export default ({
		components: {
			specialbanner,
			promotion,
			mosk,
			mosk2,
			studyVideo,
			oldJobRule,
			goldRule,
			officialRule
		},
		data() {
			return {
				stupIndex: -1,
				typeVide: 1,
				video: '',
				showGrow: false,
				classType: 0,
				title: '正式零工', //提升弹框标题
				title2: '激活后，可直接享受金牌权益',
				moskShow: false, //弹框提示
				moskShow2: false,
				iconTitle: '',
				iconTitle2: '',
				goldRule, //金牌规则
				officialRule, //正式规则
				oldJobRule, //试用规则
				type: 1, // 类型 试用1 正式2  金牌3
				bannerList: [{
					picture: '../../static/icon3/grow/1.png',
				}, {
					picture: '../../static/icon3/grow/2.png',
				}, {
					picture: '../../static/icon3/grow/3.png',
				}, ],
				list: [{
					name: '试用任务1',
					img: require('./../../static/icon3/grow/deful.png'),
					title: '认证信息',
					title2: '',
					isOk: false
				}, {
					name: '试用任务2',
					img: require('./../../static/icon3/grow/study11.png'),
					title: '学习接单',
					title2: '',
					isOk: false
				}, {
					name: '试用任务3',
					img: require('./../../static/icon3/grow/deful2.png'),
					title: '完成3单',
					title2: '(无差评订单)',
					isOk: false
				}, ],
				list2: [{
					name: '正式任务1',
					img: require('./../../static/icon3/grow/study33.png'),
					title: '学习培训',
					title2: '',
					isOk: false
				}, {
					name: '正式任务2',
					img: require('./../../static/icon3/grow/formal.png'),
					title: '购买工装',
					title2: '(工装必备着装)',
					isOk: false
				}, {
					name: '正式任务3',
					img: require('./../../static/icon3/grow/formal1.png'),
					title: '完成5单',
					title2: '(无差评订单)',
					isOk: false
				}, ],
				list3: [{
					name: '晋升任务1',
					img: require('./../../static/icon3/grow/gl1.png'),
					title: '保证金',
					title2: '(晋升失败退回)',
					isOk: false
				}, {
					name: '晋升任务2',
					img: require('./../../static/icon3/grow/study44.png'),
					title: '专属培训',
					title2: '',
					isOk: false
				}, {
					name: '晋升任务3',
					img: '',
					title: '',
					title2: '',
					stu1: '',
					stu2: '',
					stu3: '',
					stu4: '',
					isOk: false
				}, {
					name: '晋升任务4',
					img: require('./../../static/icon3/grow/tiemr.png'),
					title: '',
					title2: '',
					isOk: false
				}, ],
				list4: [{
					name: '保留周期1',
					img: '',
					title: '',
					title2: '',
					stu1: '',
					stu2: '',
					stu3: '',
					stu4: '',
					isOk: false
				}, {
					name: '保留周期2',
					img: require('./../../static/icon3/grow/formal1.png'),
					title: '',
					title2: '',
					isOk: false
				}],
				swiperConfig: {
					autoplay: false,
					interval: 3000,
					duration: 300,
					circular: true,
					previousMargin: '58rpx',
					nextMargin: '58rpx',
				},
				cardList: ['每日报名', '每日接单', '接取任务', '工作保险', '生日祝福', '专属客服', '实时到账', '任务补贴', '金牌之星', '免费提现', ],
				isRight: 1, //scroll-view左右滑动添加样式
				resData: {}, //用户全部数据
				content: {}, //单数信息
				userIdentity: 0, //用户状态
				curryIndex: 0,
				imgNmuber: 0,
				dataTime: 0,
				detail: { //头部切换的数据
					"type": "change",
					"timeStamp": 0,
					"detail": {
						"current": 1,
						"currentItemId": "",
						"source": "touch"
					},
					"target": {
						"id": "",
						"offsetLeft": 0,
						"offsetTop": 0,
						"dataset": {},
						"current": 1,
						"currentItemId": "",
						"source": "touch"
					},
					"currentTarget": {
						"id": "",
						"offsetLeft": 0,
						"offsetTop": 0,
						"dataset": {}
					},
					"mp": {
						"@warning": "mp is deprecated",
						"type": "change",
						"timeStamp": 0,
						"detail": {
							"current": 1,
							"currentItemId": "",
							"source": "touch"
						},
						"target": {
							"id": "",
							"offsetLeft": 0,
							"offsetTop": 0,
							"dataset": {},
							"current": 1,
							"currentItemId": "",
							"source": "touch"
						},
						"currentTarget": {
							"id": "",
							"offsetLeft": 0,
							"offsetTop": 0,
							"dataset": {}
						}
					},
					"_processed": true,
				},
				goldMedalEndTime: '',
				styleScole: ''
			}
		},
		watch: {},
		// 联系客服
		onNavigationBarButtonTap(e) {
			uni.navigateTo({
				url: '/pages/onLinePage/kefu?userId=' + uni.getStorageSync('userInfo').userId
			})
		},
		onload() {
			this.getUser()
		},
		methods: {
			// 去支付定金
			toZhifu() {
				// if (this.resData.ensureAccount !== null && this.resData.ensureAccount > 0) return
				uni.navigateTo({
					url: '/pages/earnest/earnest'
				})
			},
			// 刷新
			refresh() {
				this.getUser()
			},
			// 关闭 教学
			toClose(e) {
				this.getUser()
				this.showGrow = false
			},
			// 培训
			toPeixun(e) {
				if (e == 1) {
					this.video =
						'https://images.linglinggong.net/%E6%AD%A3%E5%BC%8F%E6%A8%A1%E6%8B%9F%E6%95%99%E5%AD%A6%E8%A7%86%E9%A2%91_1.mp4'
					this.typeVide = 4
					this.showGrow = true
				} else if (e == 2) {
					if ([0, null].includes(this.resData.ensureAccount)) {
						uni.showToast({
							title: '请先交保证金',
							icon: 'none'
						})
						this.styleScole = 'zoom'
						setTimeout(() => {
							this.styleScole = ''
						}, 100)
					} else {
						this.showGrow = true
						this.video =
							'https://images.linglinggong.net/%E9%87%91%E7%89%8C%E6%A8%A1%E6%8B%9F%E6%95%99%E5%AD%A6%E8%A7%86%E9%A2%91.mp4'
						this.typeVide = 4
					}
				}
			},
			// 切换不同状态
			toParent(e) {
				this.curryIndex = e
				this.stupIndex = e
				this.isRight = 1 //初始化
			},
			//滑动左边
			scrolltoupper(e) {
				this.isRight = 1
			},
			//滑动右边
			scrolltolower(e) {
				this.isRight = 2
			},
			// 去权益对比
			toequity() {
				uni.navigateTo({
					url: '/pages/equity/equity'
				})
			},
			//获取用户信息
			async getUser() {
				let res = await this.$fetch(this.$api.get_user_by_token, {}, 'POST')
				let {
					idCardStatus, //实名认证
					stopCompleteCount, //已完成单数
					needCompleteCount,
					userIdentity, //0 试用零工 1 正式零工 2 金牌晋升期 3 金牌保留期 4 待激活正式零工 5 待激活金牌晋升期
					ensureAccount, //保证金
					studyFlag, // 是否学习
					userPromotionFlag, //保留金牌 1保留失败  0成功 
					noviceguide, // 新人学习
					goldMedalEndTime, //vip到期时间
					frockFlag, //是否购买工装  0 否  1 是
					userIdentityStatus
				} = res.data
				this.resData = res.data
				this.userIdentity = userIdentity //：0 试用零工 1 正式零工 2 金牌晋升期 3 金牌保留期 4 待激活正式零工 5 待激活金牌晋升期
				this.content = res.data
				this.type = userIdentityStatus
				this.curryIndex = userIdentityStatus
				this.goldMedalEndTime = goldMedalEndTime
				// 渲染列表  实名+完成3单 
				if (idCardStatus == 2) {
					this.list[0].isOk = true
				} else {
					this.list[0].isOk = false
				}
				// 是否学习新人教学
				if (noviceguide) {
					this.list[1].isOk = true
				} else {
					this.list[1].isOk = false
				}
				if (userIdentity !== 0 || (userIdentity == 0 && stopCompleteCount >= needCompleteCount)) {
					this.list[2].isOk = true
				} else {
					this.list[2].isOk = false
				}
				// z正式零工 购买工装 完成5单  学习培训
				if (userIdentityStatus == 2 || (studyFlag)) {
					this.$set(this.list2[0], 'isOk', true)
				} else {
					this.$set(this.list2[0], 'isOk', false)
				}
				if (this.content.frockFlag == 1) {
					this.$set(this.list2[1], 'isOk', true)
				} else {
					this.$set(this.list2[1], 'isOk', false)
				}
				if ([2, 3].includes(userIdentity) || ([1, 5].includes(userIdentity) && stopCompleteCount >=
						needCompleteCount)) {
					this.$set(this.list2[2], 'isOk', true)
				} else {
					this.$set(this.list2[2], 'isOk', false)
				}
				// 金牌
				if (ensureAccount !== null && ensureAccount > 0) {
					this.$set(this.list3[0], 'isOk', true)
				} else {
					this.$set(this.list3[0], 'isOk', false)
				}
				// 是否学习
				if (userIdentityStatus == 2 || (userIdentity == 5 && studyFlag == 3)) {
					this.$set(this.list3[1], 'isOk', true)
				} else {
					this.$set(this.list3[1], 'isOk', false)
				}
				// 保证金  订单 stopCompleteCount  needCompleteCount   工时 stopUserOrderCount   needUserOrderCount 雇主数 stopTaskUserId  needTaskUserId   评分 stopUserScore needUserScore
				if (userIdentity == 2 && (this.content.stopCompleteCount >= this.content.needCompleteCount && this
						.content.stopUserOrderCount >= this.content.needUserOrderCount && this.content
						.stopTaskUserId >= this.content.needTaskUserId && this.content.stopUserScore >= this
						.content.needUserScore)) {
					this.$set(this.list3[2], 'isOk', true)
				} else {
					this.$set(this.list3[2], 'isOk', false)
				}
				//  晋升时间获取vip时间
				if ([2, 3].includes(userIdentity)) {
					let data = new Date().getTime()
					let c = new Date(this.$system == 'ios' ? goldMedalEndTime.replaceAll('-', '/') :
						goldMedalEndTime).getTime()
					let d = ((c - data) / (1000 * 3600 * 24))
					this.dataTime = parseInt(d)
					if (this.dataTime == 0) {
						this.$set(this.list3[3], 'isOk', true)
					} else {
						this.$set(this.list3[3], 'isOk', false)
					}
				}
				// 保留 list4
				if (userIdentity == 3 && (this.content.stopCompleteCount >= this.content.needCompleteCount && this
						.content.stopUserOrderCount >= this.content.needUserOrderCount && this.content
						.stopTaskUserId >= this.content.needTaskUserId && this.content.stopUserScore >= this
						.content.needUserScore)) {
					this.$set(this.list4[0], 'isOk', true)
				} else {
					this.$set(this.list4[0], 'isOk', false)
				}
				//  保留时间 list4
				if (goldMedalEndTime) {
					let data = new Date().getTime()
					let c = new Date(goldMedalEndTime.replaceAll('-', '/')).getTime()
					let d = ((c - data) / (1000 * 3600 * 24))
					this.dataTime = parseInt(d)
					if (this.dataTime == 0) {
						this.$set(this.list4[1], 'isOk', true)
					} else {
						this.$set(this.list4[1], 'isOk', false)
					}
				}
				uni.setStorage({
					key: "Mosktime",
					data: false,
				});
				// userIdentity == 4 && this.curryIndex == 0
				if (userIdentity == 4 && this.curryIndex == 0) {
					this.moskShow = true //没有弹框
					this.title = '正式零工' //提升弹框标题
					this.title2 = '激活后，身份变动为正式零工'
				} else if (userIdentity == 1 && this.curryIndex == 1) {
					this.moskShow2 = true //带有icon的弹框
					this.imgNmuber = 5 //带有icon 地址
					this.iconTitle = '正式零工'
					this.iconTitle2 = '您已享受正式零工权益'
				} else if (userIdentity == 5 && this.curryIndex == 1) {
					this.moskShow = true //没有弹框
					this.title = '金牌零工' //提升弹框标题
					this.title2 = '激活后，可直接享受金牌权益'
				} else if (userIdentity == 3 && this.curryIndex == 2) {
					this.moskShow2 = true //带有icon的弹框
					this.imgNmuber = 1
					this.iconTitle = '金牌零工'
					this.iconTitle2 = '请在下一个保留期内继续努力!'
				} else if (userIdentity == 2 && userPromotionFlag == 1) { //晋升失败
					this.moskShow2 = true //带有icon的弹框
					this.imgNmuber = 4
					this.iconTitle = '保证金将于'
					this.iconTitle2 = '返还至您的钱包'
				} else if (userIdentity == 3 && userPromotionFlag == 0 && this.curryIndex == 2) {
					this.moskShow2 = true //带有icon的弹框
					this.imgNmuber = 2
					this.iconTitle = '金牌零工'
					this.iconTitle2 = '将开启 30天 的金牌保留期'
				} else if (userIdentity == 3 & userPromotionFlag == 1) { //保留失败
					this.moskShow2 = true //带有icon的弹框
					this.imgNmuber = 4
					this.iconTitle = '保证金将于'
					this.iconTitle2 = '返还至您的钱包'
				}
			},
			//购买工装
			toBug() {
				if (((this.content.userIdentity == 5 || this.content.userIdentityStatus == 2) || ((this.userIdentity ==
						4) && (this.content.userIdentityStatus == 0) && this.content.studyFlag == 1) || (this
						.content.userIdentity == 1 && this.content.studyFlag == 1))) {
					uni.navigateTo({
						url: '/pages/buy-clothing/buy-clothing'
					})
				} else {
					uni.showToast({
						title: '请先培训',
						icon: 'none'
					})
					this.styleScole = 'zoom'
					setTimeout(() => {
						this.styleScole = ''
					}, 100)
				}
			},
			// 关闭 或者跳转
			fromChild(e) {
				this.moskShow = false
				this.moskShow2 = false
				if (this.userIdentity == 4 && this.curryIndex == 0) {
					this.$refs.swiperTop.swiperChange(this.detail)
				} else if (this.userIdentity == 5 && this.curryIndex == 1) {
					this.$set(this.detail.detail, 'current', 2)
					this.$refs.swiperTop.swiperChange(this.detail)
				} else if (this.resData.userPromotionFlag == 1 && this.curryIndex == 2) {
					this.$set(this.detail.detail, 'current', 1)
					this.$refs.swiperTop.swiperChange(this.detail)
				}
			}
		},
		onShow() {
			this.getUser()
		},
	})
</script>
<style scoped lang="scss">
	.content {
		width: 100%;
		background: #2C2C2E;

		// 头部
		&-header {
			height: 476rpx;
		}

		// 标题
		&-title {
			margin: 0 28rpx;
			width: 684rpx;
			display: flex;
			align-items: center;
			height: 44rpx;

			&>view:nth-child(1) {
				width: 8rpx;
				height: 40rpx;
				box-shadow: 0rpx 2rpx 6rpx 2rpx rgba(32, 30, 30, 0.87);
				border-radius: 30rpx 30rpx 30rpx 30rpx;
				opacity: 1;
				margin-right: 20rpx;
			}

			// 试用   
			.active {
				background: #9699A3;
			}

			//正式
			.active1 {
				background: #FED2AF;
			}

			// 金牌
			.active2 {
				background: #DAA674;
			}

			&>view:nth-child(2) {
				font-size: 32rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
			}

			// 试用
			.activeText1 {
				color: #E6E6E6;
			}

			//正式
			.activeText2 {
				color: #FED2AF;
			}

			// 金牌
			.activeText3 {
				color: #DAA674;
			}

			&>view:nth-child(3) {
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #9699A3;
				line-height: 0rpx;
				margin-left: auto;
				display: flex;
				align-items: center;

				.img {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}

		// 享受权益
		.change-btn {
			width: 100%;
			display: flex;
			justify-content: center;
			margin-top: -30rpx;

			.btn1 {
				width: 28rpx;
				height: 6rpx;
				border-radius: 14rpx;
				opacity: 0.5;
				margin-right: 8rpx;
			}

			// 初始
			.btn11 {
				background: #676769;
			}

			// 正式
			.btn12 {
				background: #FED2AF;
			}

			//金牌
			.btn13 {
				background: #DAA674;
			}

			// 滑动状态初始
			.btnStatus1 {
				width: 60rpx !important;
				background: #9699A3;
				box-shadow: 0rpx 2rpx 6rpx 2rpx rgba(239, 203, 167, 0.3) !important;
				border-radius: 14rpx !important;
				transition: all linear 0.3s;
				opacity: 1;
			}

			// 正式
			.btnStatus2 {
				width: 60rpx !important;
				background: #FED2AF;
				box-shadow: 0rpx 2rpx 6rpx 2rpx rgba(239, 203, 167, 0.3) !important;
				border-radius: 14rpx !important;
				transition: all linear 0.3s;
				opacity: 1;
			}

			//金牌
			.btnStatus3 {
				width: 60rpx !important;
				background: #DAA674;
				box-shadow: 0rpx 2rpx 6rpx 2rpx rgba(239, 203, 167, 0.3) !important;
				border-radius: 14rpx !important;
				transition: all linear 0.3s;
				opacity: 1;
			}
		}

		// 享受权益
		&-status {
			width: 694rpx;
			height: 456rpx;
			margin: 40rpx auto 0;
			background: #3A3A3A;
			box-shadow: 0rpx 6rpx 24rpx 2rpx rgba(32, 30, 30, 0.64), inset 1rpx 1rpx 0rpx 2rpx rgba(150, 153, 163, 0.21);
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			opacity: 1;
			border: 2rpx solid #9699A3;

			.scroll-view {
				width: 694rpx;
				height: 456rpx;

				// padding-right: 100rpx;
				.card {
					display: flex;
					flex-direction: column;
					align-items: center;

					text {
						font-size: 28rpx;
						font-weight: 400;
						color: gray;
					}
				}

				//初始
				.icon-card {
					width: 100rpx;
					height: 100rpx;
					background: rgba(0, 0, 0, 0.05);
					border-radius: 42rpx 42rpx 42rpx 42rpx;
					background-size: cover;
				}

				// 试用1  
				.icon-card1 {
					width: 100rpx;
					height: 100rpx;
					background: #4E4E4E;
					box-shadow: 0rpx 2rpx 6rpx 2rpx rgba(0, 0, 0, 0.05), inset 1rpx 1rpx 0rpx 2rpx rgba(255, 255, 255, 0.3);
					border-radius: 42rpx 42rpx 42rpx 42rpx;
					opacity: 1;
					background-size: cover;
				}

				.color1 {
					color: #F2F2F2 !important;
				}

				//正式2
				.icon-card2 {
					width: 100rpx;
					height: 100rpx;
					background: #4E4E4E;
					box-shadow: 0rpx 2rpx 6rpx 2rpx rgba(0, 0, 0, 0.05), inset 1rpx 1rpx 0rpx 2rpx rgba(254, 210, 175, 0.5);
					border-radius: 42rpx 42rpx 42rpx 42rpx;
					background-size: cover;
					opacity: 1 !important;
				}

				.color2 {
					color: #FED2AF !important;
				}

				//金牌3
				.icon-card3 {
					width: 100rpx;
					height: 100rpx;
					background: #201E1E;
					box-shadow: 0rpx 2rpx 6rpx 2rpx rgba(0, 0, 0, 0.05), inset 1rpx 1rpx 0rpx 2rpx rgba(254, 210, 175, 0.5);
					border-radius: 42rpx 42rpx 42rpx 42rpx;
					opacity: 1 !important;
					background-size: cover;
				}

				.color3 {
					color: #daa674 !important;
				}
			}
		}
	}

	.scroll-view /deep/ .uni-scroll-view-content {
		white-space: nowrap;
		display: grid;
		grid-template-columns: repeat(5, 100rpx);
		grid-template-rows: 168rpx;
		gap: 30rpx 64rpx;
		margin: 30rpx 10rpx 30rpx 26rpx;
		padding-right: 100rpx;
	}

	// 文字颜色状态
	.text1 {
		font-size: 28rpx;
		font-weight: 400;
		color: #F2F2F2;
	}

	.text2 {
		font-size: 28rpx;
		font-weight: 400;
		color: gray;
	}

	.text3 {
		font-size: 28rpx;
		font-weight: 400;
		color: gray;
	}

	.top {
		margin-top: 80rpx;
	}

	.mosk-vip {
		width: 100%;
		height: 100%;
		position: relative;
		padding-bottom: 30rpx;

		.mosk {
			width: 100%;
			height: 100%;
			position: absolute;
			backdrop-filter: blur(5px);
			-webkit-backdrop-filter: blur(5px);
			background: rgba(0, 0, 0, 0.5);
			overflow: hidden;
			z-index: 99;

			&>text {
				font-size: 36rpx;
				font-weight: 800;
				color: #FFFFFF;
				position: absolute;
				margin: 158rpx 0 40rpx 28rpx !important;
				z-index: 99;
			}

			&>view {
				width: 694rpx;
				height: 200rpx;
				background: #1A1B1B;
				box-shadow: 0rpx 6rpx 24rpx 2rpx rgba(32, 30, 30, 0.64), inset 1rpx 1rpx 0rpx 2rpx rgba(250, 210, 130, 0.5);
				border-radius: 24rpx;
				opacity: 1;
				border: 2rpx solid rgba(253, 220, 138, 0.16);
				margin: 0 auto 0;
				position: absolute;
				left: 28rpx;
			}

			&>view:nth-child(2) {
				display: flex;
				justify-content: space-between;
				color: #FFFFFF;
				top: 248rpx;

				&>view:nth-child(1) {
					display: flex;
					flex-direction: column;
					margin: 52rpx 20rpx;
					line-height: 2;
				}

				&>view:nth-child(2) {
					align-self: center;
					padding: 8rpx 20rpx;
					font-weight: bold;
					border-radius: 28rpx;
					margin-right: 20rpx;
				}
			}

			&>view:nth-child(3) {
				display: flex;
				justify-content: space-between;
				color: #FFFFFF;
				top: 488rpx;

				&>view:nth-child(1) {
					display: flex;
					flex-direction: column;
					margin: 52rpx 20rpx;
					line-height: 2;
				}

				&>view:nth-child(2) {
					align-self: center;
					padding: 8rpx 20rpx;
					font-weight: bold;
					border-radius: 28rpx;
					margin-right: 20rpx;
				}

				.px {
					color: #262626;
					font-weight: bold;
					background: #787878;
				}

				.py {
					color: #262626;
					background: #FCC928;
					box-shadow: 0px 6px 12px 2px rgba(255, 133, 29, 0.3);
				}
			}
		}

		// 金牌开通
		.mosk2 {
			width: 100%;
			height: 100%;
			position: absolute;
			backdrop-filter: blur(5px);
			-webkit-backdrop-filter: blur(5px);
			background: rgba(0, 0, 0, 0.5);
			z-index: 99;
			display: flex;
			flex-direction: column;

			&>text:nth-child(1) {
				font-size: 36rpx;
				font-weight: 800;
				color: #FFFFFF;
				margin: 114rpx 0 10rpx 28rpx;
			}

			&>text:nth-child(2) {
				font-size: 24rpx;
				font-weight: 400;
				color: #FFFFFF;
				margin-left: 28rpx;
			}

			&>view:nth-child(3) {
				top: 248rpx;
			}

			&>view:nth-child(3),
			&>view:nth-child(4) {
				display: flex;
				justify-content: space-between;
				color: #FFFFFF;
				width: 694rpx;
				height: 200rpx;
				background: #1A1B1B;
				box-shadow: 0rpx 6rpx 24rpx 2rpx rgba(32, 30, 30, 0.64), inset 1rpx 1rpx 0rpx 2rpx rgba(250, 210, 130, 0.5);
				border-radius: 24rpx;
				opacity: 1;
				border: 2rpx solid rgba(253, 220, 138, 0.16);
				margin: 0 auto 0;
				position: absolute;
				left: 28rpx;
				margin-top: 248rpx;

				&>view:nth-child(1) {
					display: flex;
					flex-direction: column;
					margin: 52rpx 20rpx;
					line-height: 2;
					width: 470rpx;

					&>text:nth-child(2) {
						line-height: 1.5;
					}
				}

				&>view:nth-child(2) {
					align-self: center;
					padding: 8rpx 20rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #262626;
					background: #FCC928;
					box-shadow: 0px 6rpx 12rpx 2rpx rgba(255, 133, 29, 0.3);
					border-radius: 28rpx;
					margin-right: 20rpx;
				}
			}
		}
	}

	.px {
		color: #262626;
		font-weight: bold;
		background: #787878 !important;
		box-shadow: none !important;
	}

	.py {
		font-weight: bold;
		color: #262626;
		background: #FCC928;
		box-shadow: 0px 6px 12px 2px rgba(255, 133, 29, 0.3);
	}

	.fontWait {
		font-size: 32rpx;
		font-weight: bold;
	}

	.zoom {
		animation: scale 0.2s ease both
	}

	@keyframes scale {
		15% {
			transform: scale(1);
		}

		75% {
			transform: scale(1.1);
		}
	}
</style>